<template>
  <div>
    <div class="mb-3">
      <query-form :params="params" @search="handleSearch" @reset="handleReset">
        <query-item :label="$t('shortMessage.receiver')" name="Q_Contains_receiver"></query-item>
      </query-form>
    </div>
    <div>
      <!-- <el-popconfirm :title="$t('confirmDelete')" @confirm="handleDelete(selection.map((row) => row.id))">
        <template #reference>
          <el-button :disabled="selection.length <= 0 || perm('shortMessage:delete')" :icon="Delete">{{ $t('delete') }}</el-button>
        </template>
      </el-popconfirm> -->
      <column-setting name="shortMessage" class="ml-2" />
    </div>
    <div class="app-block mt-3">
      <el-table ref="table" v-loading="loading" :data="data" @selection-change="(rows) => (selection = rows)" @row-dblclick="(row) => handleEdit(row.id)" @sort-change="handleSort">
        <column-list name="shortMessage">
          <el-table-column type="selection" width="45"></el-table-column>
          <el-table-column property="id" label="ID" width="64" sortable="custom"></el-table-column>
          <el-table-column property="product" label="产品" sortable="custom" width="100"></el-table-column>
          <el-table-column property="version" label="版本" sortable="custom" width="100"></el-table-column>
          <el-table-column property="applyUserName" label="反馈人" show-overflow-tooltip></el-table-column>
          <el-table-column property="phone" label="手机" sortable="custom" width="170"></el-table-column>
          <el-table-column property="desc" label="反馈内容" sortable="custom" show-overflow-tooltip></el-table-column>
          <el-table-column property="createDate" label="反馈日期" sortable="custom" width="170"></el-table-column>
          <el-table-column property="status" label="状态" sortable="custom" show-overflow-tooltip>
            <template #default="{ row }">
              <el-tag v-if="row.status === 0" type="success" size="small">未联系</el-tag>
              <el-tag v-else-if="row.status === 1" type="danger" size="small">已联系</el-tag>
              <el-tag v-else-if="row.status === 2" type="danger" size="small">已处理</el-tag>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.action')">
            <template #default="{ row }">
              <el-button type="primary" :disabled="perm('productFeedback:detail')" @click="handleDetail(row.id)" size="small" link>文件详情</el-button>
              <el-dropdown>
                <el-button type="primary" :disabled="perm('productFeedback:update')" link size="small" style="margin-top: 4px">
                  修改状态<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="changeTryStatus({id: row.id, status: 0})">未联系</el-dropdown-item>
                    <el-dropdown-item @click="changeTryStatus({id: row.id, status: 1})">已联系</el-dropdown-item>
                    <el-dropdown-item @click="changeTryStatus({id: row.id, status: 2})">已处理</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </column-list>
      </el-table>
      <el-pagination
        v-model:currentPage="currentPage"
        v-model:pageSize="pageSize"
        :total="total"
        :page-sizes="pageSizes"
        :layout="pageLayout"
        @size-change="fetchData()"
        @current-change="fetchData()"
        small
        background
        class="px-3 py-2 justify-end"
      ></el-pagination>
    </div>
    <short-message-form v-model="formVisible" :beanId="beanId" :beanIds="beanIds" @finished="fetchData" />
    <!-- 详情 -->
    <el-dialog
        v-model="detailVisible"
        title="问题反馈文件"
        width="68%"
      >
        <el-table :data="dataF">
          <el-table-column property="id" label="ID" width="64" sortable="custom"></el-table-column>
          <el-table-column property="name" label="名称" sortable="custom" show-overflow-tooltip></el-table-column>
          <el-table-column property="url" label="地址" sortable="custom" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
                <el-button type="primary" @click="fileDownload(row.url)" size="small" link>下载</el-button>
              </template>
          </el-table-column>
        </el-table>
      </el-dialog>
  </div>
</template>

<script lang="ts">
export default { name: 'ShortMessageList' };
</script>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { Delete } from '@element-plus/icons-vue';
import { useI18n } from 'vue-i18n';
import dayjs from 'dayjs';
import { perm } from '@/store/useCurrentUser';
import { pageSizes, pageLayout, toParams, resetParams } from '@/utils/common';
import { deleteShortMessage, queryShortMessagePage } from '@/api/log';
import { ColumnList, ColumnSetting } from '@/components/TableList';
import { QueryForm, QueryItem } from '@/components/QueryForm';
import { queryProductFeedback, updateProductFeedback, productFeedbackDetail } from '@/api/product';
const { t } = useI18n();
const params = ref<any>({});
const sort = ref<any>();
const currentPage = ref<number>(1);
const pageSize = ref<number>(10);
const total = ref<number>(0);
const table = ref<any>();
const data = ref<any[]>([]);
const selection = ref<any[]>([]);
const loading = ref<boolean>(false);
const formVisible = ref<boolean>(false);
const beanId = ref<number>();
const beanIds = computed(() => data.value.map((row) => row.id));
const fetchData = async () => {
  loading.value = true;
  try {
    const { content, totalElements } = await queryProductFeedback({ ...toParams(params.value), pageNum: currentPage.value, pageSize: pageSize.value });
    data.value = content;
    total.value = totalElements;
  } finally {
    loading.value = false;
  }
};
onMounted(fetchData);

const handleSort = ({ column, prop, order }: { column: any; prop: string; order: string }) => {
  if (prop) {
    sort.value = (column.sortBy ?? prop) + (order === 'descending' ? '_desc' : '');
  } else {
    sort.value = undefined;
  }
  fetchData();
};
const handleSearch = () => fetchData();
const handleReset = () => {
  table.value.clearSort();
  resetParams(params.value);
  sort.value = undefined;
  fetchData();
};

const handleAdd = () => {
  beanId.value = undefined;
  formVisible.value = true;
};
const handleEdit = (id: number) => {
  beanId.value = id;
  formVisible.value = true;
};
const handleDelete = async (ids: number[]) => {
  await deleteShortMessage(ids);
  fetchData();
  ElMessage.success(t('success'));
};

const changeTryStatus = async (data: object) => {
  const { status } = await updateProductFeedback(data)
  if (status === 0) {
    fetchData()
  }
};
let detailVisible = ref<boolean>(false)
let dataF = ref<any[]>([])
const handleDetail = async (id: number) => {
  beanId.value = id
  detailVisible.value = true
  const { fileList } = await productFeedbackDetail(id)
  dataF.value = fileList
}
const fileDownload = (url: string) => {
  window.location.href = url
}
</script>
